<template>
  <div class="image-renderer" :class="mode">
    <!-- 设计模式 -->
    <div v-if="mode === 'design'" class="design-mode">
      <div class="image-preview" :class="{ 'has-image': imageUrl }">
        <div v-if="!imageUrl" class="image-placeholder">
          <i class="el-icon-picture-outline placeholder-icon"></i>
          <p class="placeholder-text">点击上传图片</p>
        </div>
        
        <img
          v-else
          :src="imageUrl"
          :alt="imageAlt"
          class="preview-image"
          @click="editImage"
        />
        
        <div v-if="imageUrl" class="image-overlay">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="editImage"
            class="edit-btn"
          >
            编辑
          </el-button>
        </div>
      </div>
      
      <div class="image-info" v-if="imageUrl">
        <div class="info-row">
          <span class="label">文件名:</span>
          <span class="value">{{ imageName }}</span>
        </div>
        <div class="info-row">
          <span class="label">尺寸:</span>
          <span class="value">{{ imageSize }}</span>
        </div>
      </div>
    </div>

    <!-- 预览和生成模式 -->
    <div v-else class="preview-mode">
      <div class="image-container" :style="containerStyle">
        <img
          v-if="imageUrl"
          :src="imageUrl"
          :alt="imageAlt"
          :style="imageStyle"
          class="display-image"
        />
        
        <div v-else class="no-image">
          <i class="el-icon-picture-outline"></i>
          <p>图片未设置</p>
        </div>
      </div>
    </div>

    <!-- 图片编辑对话框 -->
    <el-dialog
      title="编辑图片"
      :visible.sync="editDialog.visible"
      width="500px"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <image-editor
        v-if="editDialog.visible"
        :image-config="imageConfig"
        @save="handleImageSave"
        @cancel="editDialog.visible = false"
      />
    </el-dialog>
  </div>
</template>

<script>
import ImageEditor from './ImageEditor.vue'

export default {
  name: 'ImageRenderer',
  components: {
    ImageEditor
  },
  props: {
    component: {
      type: Object,
      required: true,
      default: () => ({
        content: {
          imageUrl: '',
          alt: '',
          width: '100%',
          height: 'auto',
          align: 'center'
        }
      })
    },
    config: {
      type: Object,
      default: () => ({})
    },
    mode: {
      type: String,
      default: 'design'
    },
    testData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      editDialog: {
        visible: false
      }
    }
  },
  computed: {
    imageConfig() {
      return this.component.content || {}
    },
    
    imageUrl() {
      return this.imageConfig.imageUrl
    },
    
    imageAlt() {
      return this.imageConfig.alt || '图片'
    },
    
    imageName() {
      if (!this.imageUrl) return ''
      return this.imageUrl.split('/').pop() || '未知文件'
    },
    
    imageSize() {
      // 这里可以添加获取图片实际尺寸的逻辑
      const width = this.imageConfig.width || 'auto'
      const height = this.imageConfig.height || 'auto'
      return `${width} × ${height}`
    },
    
    containerStyle() {
      const styles = {
        display: 'flex',
        justifyContent: this.getAlignStyle(this.imageConfig.align),
        alignItems: 'center',
        height: '100%'
      }
      
      return styles
    },
    
    imageStyle() {
      const styles = {}
      
      if (this.imageConfig.width) {
        styles.width = this.imageConfig.width
      }
      
      if (this.imageConfig.height) {
        styles.height = this.imageConfig.height
      }
      
      if (this.imageConfig.maxWidth) {
        styles.maxWidth = this.imageConfig.maxWidth
      }
      
      if (this.imageConfig.maxHeight) {
        styles.maxHeight = this.imageConfig.maxHeight
      }
      
      styles.objectFit = this.imageConfig.objectFit || 'contain'
      
      return styles
    }
  },
  methods: {
    /**
     * 编辑图片
     */
    editImage() {
      this.editDialog.visible = true
    },
    
    /**
     * 处理图片保存
     */
    handleImageSave(updatedConfig) {
      this.$emit('update', {
        content: updatedConfig
      })
      this.editDialog.visible = false
    },
    
    /**
     * 获取对齐样式
     */
    getAlignStyle(align) {
      const alignMap = {
        left: 'flex-start',
        center: 'center',
        right: 'flex-end'
      }
      return alignMap[align] || 'center'
    },
    
    /**
     * 获取图片预览URL
     */
    getImagePreviewUrl(url) {
      // 如果是base64图片，直接返回
      if (url.startsWith('data:')) {
        return url
      }
      
      // 如果是相对路径，可以添加基础URL
      if (url.startsWith('/') || !url.includes('://')) {
        return `${process.env.VUE_APP_BASE_URL || ''}${url}`
      }
      
      return url
    }
  }
}
</script>

<style scoped>
.image-renderer {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.design-mode {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.image-preview {
  flex: 1;
  border: 2px dashed #dcdfe6;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: #f8f9fa;
  transition: all 0.3s;
  cursor: pointer;
}

.image-preview.has-image {
  border-style: solid;
  border-color: #e6e8eb;
}

.image-preview:hover {
  border-color: #409eff;
}

.image-placeholder {
  text-align: center;
  color: #c0c4cc;
}

.placeholder-icon {
  font-size: 48px;
  margin-bottom: 8px;
}

.placeholder-text {
  margin: 0;
  font-size: 14px;
}

.preview-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.image-preview:hover .image-overlay {
  opacity: 1;
}

.edit-btn {
  transform: translateY(-10px);
  transition: transform 0.3s;
}

.image-preview:hover .edit-btn {
  transform: translateY(0);
}

.image-info {
  padding: 8px;
  background: #f5f7fa;
  border-radius: 4px;
  font-size: 12px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.info-row:last-child {
  margin-bottom: 0;
}

.label {
  color: #909399;
}

.value {
  color: #606266;
  font-weight: 500;
}

.preview-mode {
  width: 100%;
  height: 100%;
}

.image-container {
  width: 100%;
  height: 100%;
  padding: 4px;
}

.display-image {
  max-width: 100%;
  max-height: 100%;
}

.no-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #c0c4cc;
  text-align: center;
}

.no-image i {
  font-size: 32px;
  margin-bottom: 8px;
}

.no-image p {
  margin: 0;
  font-size: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .image-preview {
    min-height: 120px;
  }
  
  .placeholder-icon {
    font-size: 32px;
  }
  
  .placeholder-text {
    font-size: 12px;
  }
}
</style>